import React from 'react'
import clsx from 'clsx'
import { makeStyles } from '@material-ui/core/styles'
import { Typography, Button } from '@material-ui/core'

const useStyles = makeStyles({
  root: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '20px 0',

    '& button': {
      margin: '8px'
    }
  },
})

interface IProps{
  reload?: () => void
  message?: string
}

const FailView: React.FC<IProps> = props => {
  const classes = useStyles()

  return <div
    className={clsx(
      classes.root,
    )}
  >
    <Typography 
      gutterBottom
    >
      {props.message}
    </Typography>
    <Button
      color="primary"
      onClick={props.reload}
    >
      重新加载
    </Button>
  </div>
}

export default FailView
